<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>
    <div v-for="book in searchResult" :key="book">
      <div>
        <el-container>
          <el-aside width="400">
            <router-link :to="`/front/detail/${book.id}`"><img :src="book.picture" width="200" height="180">
            </router-link>
          </el-aside>
          <el-main>
            <div style="margin: 0px;padding: 10px 0px;font-size:30px">
              <router-link :to="`/front/detail/${book.id}`">{{book.name}}</router-link>
              <span style="font-size:14px;margin-left: 20px;color: #99a9bf">作者：{{book.author}}</span>
            </div>

            <div>{{book.subtitle}}</div>
            <div style="margin: 10px 0px">出版社：{{book.publishingHouse}} <span style="margin: 0px 50px">
              出版时间：{{book.publishedDate.substring(0, book.publishedDate.indexOf(' '))}} </span>
            </div>
            <h4 style="margin: 0px;padding: 0px 0px;color:#F00;font-size:30px">¥{{ (book.price * 0.01).toFixed(2) }}
              <span style="color:#909399;font-size:12px">定价：<span
                style="text-decoration:line-through">{{(book.orignPrice * 0.01).toFixed(2) }}</span></span>
              <el-button type="danger" icon="el-icon-shopping-cart-full" @click="addCart(book)">加入购物车</el-button>
            </h4>
          </el-main>
        </el-container>
      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>

    <Footer></Footer>
  </div>

</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import bookApi from '@/api/book'
  import catalogApi from '@/api/catalog'

  export default {
    components: {
      Footer,
      Header
    },
    created() {
      this.searchMap.name = this.$route.query.inputMessage || ''
      this.searchMap.catalogId = this.$route.params.catalogId || ''
      this.fetchData()
    },
    data() {
      return {
        searchResult: [],
        currentPage: 1,
        searchMap: {
          name: '',
          catalogId: ''
        },
        total: 0
      }
    },
    watch: {
      $route(to, from) {
        this.searchMap.name = this.$route.query.inputMessage || ''
        this.searchMap.catalogId = this.$route.params.catalogId || ''
        this.fetchData()
      }
    },
    methods: {
      fetchData() {
        bookApi.searchBook(this.currentPage, 10, this.searchMap).then(response => {
          this.searchResult = response.data.rows
          this.total = response.data.total
        })
      },
      addCart(book) {
        this.$store.commit('addCart', {
          id: book.id,
          name: book.name,
          picture: book.picture,
          price: book.price
        })
        this.$message({
          showClose: true,
          message: '加入购物车成功',
          type: 'success'
        })
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.fetchData()
      }
    }
  }
</script>

<style scoped>

</style>
